<script setup lang="ts">
import { ref } from 'vue'
const props=defineProps({
    itemsList: {
        type: Array,
        default: () => ['选项卡1', '选项卡2', '选项卡3']
    }
})

const items = ref(props.itemsList)
const current = ref(0)
const activeColor = ref('#007aff')
const styleType = ref('button')

const onClickItem = (e: any) => {
    if (current.value !== e.currentIndex) {
        current.value = e.currentIndex
    }
}
</script>

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <uni-segmented-control :current="current" :values="items" :style-type="styleType"
                :active-color="activeColor" @clickItem="onClickItem" />
        </view>
        <view class="content">
            <view v-if="current === 0">  <slot name="header"></slot></view>
            <view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
            <view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
        </view>
    </view>
</template>
<style lang="scss">
.example-body {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    padding: 0;
}
.uni-common-mt {
    margin-top: 30px;
}
.uni-padding-wrap {
    // width: 750rpx;
    padding: 0px 30px;
}
.content {
    /* #ifndef APP-NVUE */
    // display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
    height: 500px;
    text-align: center;
    background-color: aqua;
}
.content-text {
    font-size: 14px;
    color: #666;
}
</style>
